import { Outlet } from 'react-router-dom'
import { NavBar } from './components';
import { appLocalStorage } from '@/components';
import { useEffect } from 'react';
import styles from './styles.module.less'
import './less/index.less';

function App() {

  useEffect(() => {
    window.matchMedia("prefers-color-scheme").onchange = (themeMedia) => {
      console.log('themeMedia', themeMedia);
    }
  }, [])
  const init = () => {
    let lang = appLocalStorage.getValue('lang')
    if (!lang) {
      appLocalStorage.setValue('lang', 'zh-CN')
    }
    let theme = appLocalStorage.getValue('theme')
    if (!theme) {
      appLocalStorage.setValue('theme', 'light')
    } else {
      document.querySelector('body')?.setAttribute('theme', theme)
    }
  }
  useEffect(() => {
    init()
  }, [])

  return (
    <div className={styles.app}>
      <NavBar />
      <div className={styles.appContent}>
        <Outlet />
      </div>
    </div>
  )
}

export default App

